Hello and welcome to this lecture.
In this lecture or we are going to create a function for the contact form that war enable someone to
enter the details and also submit the details on the form.
It will then save it to the local storage on the local machine.
So this is what the farm looks like at the moment.
At the moment it's not very functional so we can see typing details in here.
Send that body tool not go way.
So in this lecture we're going to implement local storage before we begin we are to have a script.
Let me just open up the index case to a male file and just highlight something for you.
We created the class for me just good through that.
So we have a class here called stored stort.
And about Tash that class two or the labels like the name feel the email field and the message fill
divorce class taught.
So what this will be the this war allowed the form elements to be stored so any where you have the class
stored you use the data submitted to that will be stored in use in this stored class.
So what I am going to do here in this lecture or like previous ones is just to save time again is explained
the code as I copy chunks of the code in.
So we're going to we're going could be using.
Query Jake Query is a javascript library.
We've already got a reference to the library via the go see the in which is a content delivery network
so there's no need to install it.
So the first thing I am pasting here is this code here.
Any way you see the dollar sign know that you are referencing a query library.
So basically what this does.
This code here and this document here is what's passed into the code and the ready method.
What that does it checks Joe query checks to make sure that the web page is fully loaded before record
executes.
It doesn't want the code to execute prematurely so that this is used to check that he looks out fully
paid and make sure that the content of the page is loaded fully before it notifies jaquie to inject
the code or to use the code.
So before any javascript is javascript code is executed.
This here I want is used to check that the document is ready so that the code does not execute too early.
I have pasted some coding from line to 2 line 14.
So I'll just explain what's going on here.
Okay so basically what's happening here is that a function called it in it is a function the function
code in it is run when the page is first loaded.
So what this function does.
It checks to see if any data is stored for each of the field.
And if there is data it and the data to the relevant form element
so so you can see here.
This is what it does.
So this is any time between this column.
This is a main calling process here.
So this is it and this is when the image function is called.
So to call this function here.
This is what is the house specified.
He just write the name of the function followed by parentheses and it will call the function.
So I've said here like 3 that if k.
If the local storage.
Name three is the name that has been entered by someone if the name is there's something there.
Here the dollar sign here is a joke query.
Inside here is Heidi.
So it looks for these selectorial here this select or Heidi code name and it evaluates it.
If there is a matching date if there's anything entered it will put it inside local storage on that
title.
Name the same thing here.
If it searches for this Heidi email it to evaluate it and put it in local storage.
That is Title email.
So for example if you've got several emails typed in this is an arena where you see square brackets
you are referring to an array so these are harrie's square brackets.
Is it they can contain more than one value.
Okay.
In the same process here he checks if there's any message in this him this.
Heidi here quod message if there is a valid set policy into a local storage on the key or label message.
Right so that's basically how this inmate function works.
So the function is defined online too.
And it is called on line for teaching.
Okay.
So I've said on the code in from line 16 to 19.
Basically what this code is code is doing here.
So what's happening here is that the this code here this chain this does this here is the class that
is attached to each of the labels.
The message they like the message the email and the name.
This class has the query here.
Inside there is the Selecter.
So this function here what the change is is a change event full function.
Basically what that does the change event only occurs when the value of an element has been changed.
It usually works with inputs text area select and so on usually with form elements.
This is used so looks out for a change in event.
So what does it all check if there's any change.
The function will then add the date that has been imported in to local storage
here.
This allows and then this.
What this is this is really is this select.
It is his view references.
The quadrent hastier elements where you see these use is reference to the current amount limit.
So this is dot and then this is the attribute.
This is the name all right.
So basically what's happening here is the level of function here the function checks to see if there's
any change and then pops the change into all local storage.
Okay so we're done now.
You just need to save always save your work.
Click save.
Hall then lunch the form and see and then.
Now we should be able to type some pin in your case so you of what we type have just typed in a name
here James Bond email James double of 7 and this is a message.
So in effect 6.
Okay and this and then I click reset.
I go to the browser now just to F 12.
Okay so the form has been submitted.
These are the contents so this was what was typed in for the email.
James had double or seven dot com and the message had said where is a party hat and the name was James
Bond So it has saved what I typed in the form into local storage so that's it for this project.
Creating a contact form local storage please feel free to contact me if you have any issues at all.
Be more than happy to help Michael.
You know you are not overwhelmed by it all.
Feel free to contact me.
I really would love to help take care of the best and I hope it has been useful.
Bye for now.